<template>
    <div class="whole">
        <!-- <div class="dia">
			<van-search v-model="agentNo" placeholder="请输入码牌编号" shape="round" :show-action="showAction"
				@search="onSearch" class="search">
			</van-search>
			<div class="" @click="onSearch">
				搜索
			</div>
		</div> -->
        <van-tabs title-active-color="#FF2828" color="#FF2828" @click="tabDitch()" v-model:active="active">
            <van-tab :title="item.channelName" v-for="(item,index) in tabList" :key="index" :name="index" />
        </van-tabs>
        <div class="dia" style="width: 100%;background-color: #fff;">
            <van-dropdown-menu active-color="#ee0a24">
                <van-dropdown-item v-model="value1" :options="option1" title-class="title_type" @change="changeDown" />
            </van-dropdown-menu>
            <van-search v-model="search" placeholder="请输入商户编号或商户名称或终端编号" shape="round" :show-action="showAction"
                class="search" @clear="onSearch">
            </van-search>
            <div class="increased" @click="onSearch">
                搜索
            </div>
        </div>
        <div class="wrapperCenter">
            <div class="content">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
                    <empty v-if="!list.length"></empty>
                    <div class="dis" v-for="(item,index) in list" :key="index">
                        <div class="main" :class="index!=0?'main_top':''">
                            <div class="main_d">
                                <div class="institution_a">
                                    <div class="institution">
                                        姓名：{{item.idCardName}}
                                    </div>
                                    <div class="condition" v-if="active==1">
                                        代理商名称：{{item.agentName}}
                                    </div>
                                    <div class="condition">
                                        编号：{{item.posMerchantNo}}
                                    </div>
                                    <div class="condition">
                                        总交易：{{item.totalAmount}}
                                    </div>

                                </div>
                                <div class="footer dia">
                                    <div class="footer_a" @click="navUrl('/viewTerminal',item)">
                                        查看终端
                                    </div>
                                    <div class="footer_a" @click="navUrl('/viewTenant',item)">
                                        查看商户
                                    </div>
                                    <div class="footer_b" @click="navUrl('/checkInformation',item)">
                                        查看数据
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
        <div class="dis audit" @click="checkaudit">
        </div>
    </div>
</template>

<script>
    import {
        selectAgentMer
    } from '@/api/terminal'
    import store from '@/store'
    import {
        showToast,
        showConfirmDialog,
        DropdownMenu,
        DropdownItem
    } from 'vant'
    export default defineComponent({
        name: 'sateActive',
        setup() {
            const router = useRoute()
            const routers = useRouter()
            const state = reactive({
                active: 0,
                selectType: 0,
                tabList: [{
                        channelName: '直属'
                    },
                    {
                        channelName: '全部商户'
                    }
                ],
                pageStart: 1,
                pageSize: 10,
                loading: false,
                finished: false,
                list: [],
                search: "",
                value1: 0,
                option1: [{
                        text: '商户名称',
                        value: 0
                    },
                    {
                        text: '商户编号',
                        value: 1
                    },
                    {
                        text: '终端编号',
                        value: 2
                    },
                ],
                // channelName: ""
            })
            //审核记录
            const checkaudit = () => {
                routers.push({
                    path: '/checkRecord'
                })
            }
            //选择下拉列表
            const changeDown = () => {
                state.search = ''
            }
            const onSearch = () => {
                state.list = []
                state.pageStart = 1
                getList()
            }
            //跳转
            const navUrl = (item, e) => {
                routers.push({
                    path: item,
                    query: {
                        merchantNo: e.posMerchantNo
                    }
                })
            }

            //tab切换
            const tabDitch = () => {
                state.pageStart = 1
                state.list = []
                state.selectType = state.active
                getList()
            }
            //获取数据
            const getList = () => {
                state.terList = router.query.terList
                let parames = {
                    agentNo: state.agentNo,
                    pageStart: state.pageStart,
                    pageSize: state.pageSize,
                    selectType: state.selectType,
                }
                if (state.value1 == 0) {
                    parames.merchantName = state.search
                } else if (state.value1 == 1) {
                    parames.merchantNo = state.search
                } else {
                    parames.terminalSn = state.search
                }
                selectAgentMer(parames).then(res => {
                    if (res.data.records.length != 0) {
                        if (res.data.records.size < 10) {
                            state.finished = true
                            state.loading = false
                        } else {
                            state.pageStart++
                            state.finished = false
                            state.loading = false
                        }
                        state.list = state.list.concat(res.data.records)
                    } else {
                        state.finished = true
                        state.loading = false
                    }

                })
            }
            return {
                ...toRefs(state),
                getList,
                onSearch,
                navUrl,
                tabDitch,
                changeDown,
                checkaudit
            }
        }
    })
</script>
<style scoped lang="scss">
    .whole {
        height: 100vh;
        background-color: #FFF9F9;
        overflow-y: auto;

        .search {
            width: 272px;
            // position: fixed;
            // top: 0;
        }

        .wrapperCenter {
            height: 100vh;
            overflow: scroll;

            .content {

                // padding: 0 10px;
                // padding-bottom:50px;
                // box-sizing: border-box;
                .main {
                    width: 339px;
                    // height: 46px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
                    border-radius: 6px;
                    padding: 12px 0px 0px 0px;
                    box-sizing: border-box;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 12px;
                    color: #333333;
                    margin-top: 12px;

                    img {
                        width: 23px;
                        height: 23px;
                        border-radius: 6px;
                    }

                    .main_d {
                        width: 100%;

                        .institution_a {
                            padding-left: 12px;
                            box-sizing: border-box;
                        }

                        .footer {
                            width: 100%;
                            border-top: 1px solid #f3f3f3;
                            margin-top: 10px;

                            .footer_a {
                                width: 50%;
                                padding-top: 12px;
                                padding-bottom: 12px;
                                box-sizing: border-box;
                                text-align: center;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 500;
                                font-size: 14px;
                                color: #FF2828;
                                border-right: 1px solid #f3f3f3;
                            }

                            .footer_b {
                                width: 50%;
                                padding-top: 12px;
                                padding-bottom: 12px;
                                text-align: center;
                                box-sizing: border-box;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 500;
                                font-size: 14px;
                                color: #FF2828;
                            }
                        }
                    }

                    .institution {
                        width: 150px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }



                    .condition {
                        margin-top: 12px;
                        // margin-left: 12px;
                    }
                }
            }
        }
    }

    .audit {
        position: fixed;
        left: 24;
        top: 240px;
        background-image: url(@/assets/terminal/audit.png);
        background-repeat: no-repeat;
        background-size: 52px 56px;
        width: 52px;
        height: 56px;
    }

    // :root:root {
    //   --van-dropdown-menu-shadow: box-shadow: none;
    // }
    :deep(.van-dropdown-menu__bar) {
        box-shadow: none;
    }

    :deep(.van-dropdown-menu__title) {
        font-size: 12px;
    }

    :deep(.van-search__content) {
        background-color: #FFECEC !important;
    }
</style>